<style scoped>
    .tablePage .vxe-toolbar {
       height: auto;
   }

   .modal-msg {
       padding-bottom: 10px;
   }

</style>
<template>
    <div class="form-modal-wrap" v-show='modalIsShow'>
        <transition name="fade"> 
            <div :style="{'width':rWidth,top: topPx+'px'}" class="form-modal" v-show='modalIsShow'>
                <img class='modal-close' src='../../assets/images/icon_close.png' @click.stop='closeTableModal()'>
                <div class="modal-header"><h4>{{title}}</h4></div>
                <div class="modal-body">
                    <p class="modal-msg">
                        <span style="color: #e13c13; font-size:14px;" >{{msg}}</span>
                    </p>
                    <LibVxeTable class="staticData tablePage" :toolbar="false" :tableColumns="column" :tableData="tableData" :tHeight="height" :PageObj="{total:totalCnt,currentPage:searchPage,pageSize:searchPageSize}"  @onPageChange="onChangePageSize" resizable></LibVxeTable>
                </div>
                <div class="modal-footer" slot="footer"></div>
            </div>
        </transition> 
    </div>
</template>
<script>
import Vue from "vue";
export default {
    name: "formModal",
    props:{
        title:{//标题内容
            type:String,
            default:'查看数据'
        },
        width:{//宽度
            type:[Number, String],
            default:800
        },
        height: {
            type:[Number, String],
            default:480
        },
        searchPageSize:{
            type:Number,
            default:50
        },
        searchPage:{
            type:Number,
            default:1
        },
        totalCnt:{
            type:Number,
            default:0
        },
        list: {
            type:Array,
            default:()=>{return []}
        },
        column:{
            type:Array,
            default:()=>{return []}
        },
        toolbar: {
            type:[Object,Boolean],
            default:()=>{
                return false;
            }
        },
        msg: {
            type:String,
            default:()=>{
                return "";
            }
        }
    },
    data(){
        return{
            modalIsShow:false,
            closeCallBack: "",
            topPx:100,
            isReload:true,
            tableData:[],
        }
    },
    computed:{
        rWidth(){
            if(typeof(this.width)=="number"){
                return this.width+"px";
            }else{
                return this.width;
            }
        },
    },
    methods:{
        closeTableModal(){
            this.modalIsShow = false;
            if (this.closeCallBack != "") {
                this.closeCallBack(this._uid);
            }
        },
        _reloadForm(){
            this.isReload = false;
            this.$nextTick(()=>{
                this.isReload = true;
            })
        },
        getData() {
            this.tableData = this.list
        },
        onChangePageSize(page,pageSize){
            this.$emit("pageChange",{"page":page,"pageSize":pageSize})
        },
    },
    mounted() {
        this.getData()
        setTimeout(() => {
            let diffHeight = this.$el.clientHeight-this.$el.children[0].clientHeight;
            if(diffHeight<0) diffHeight=0;
            else {
                diffHeight = diffHeight/2;
            }
            if(diffHeight>50) diffHeight=diffHeight-50;
            this.topPx = diffHeight;
        }, 100);
  }
}
</script>
